<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色授权</title>
    <link rel="stylesheet" href="../../static/layui/css/layui.css"/>
    <link rel="stylesheet" href="../../static/css/common.css"/>
</head>
<body class="body" style="padding-top: 30px;padding-left: 50px;padding-right: 50px;">
<div id="app">
    <div id="tree" class="tree"></div>
    <div class="btn-div">
        <button class="layui-btn layui-btn-sm layui-btn-primary btn-save" @click="cancel">取消</button>
        <button class="layui-btn layui-btn-sm layui-btn-normal btn-save" @click="authorize">授权</button>
    </div>
</div>
</body>
<script src="../../static/layui/layui.js"></script>
<script src="../../static/js/axios.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script src="../../static/js/http.js"></script>
<script src="../../static/js/vue3.js"></script>
<script src="../../static/js/common.js"></script>
<script>
  const app = {
    setup(){
      const state = Vue.reactive({
        roleId: '',
        menuIds: [],
        el: null
      })

      //    获取所有菜单
      const getMenuTree = () => {
        get('/api/sys/menu/role/tree', {roleId: state.roleId}).then(res => {
          if (res.success){
            Vue.nextTick(() => {
              layui.config({
                base: '../../static/js/'
              }).use('eleTree', function () {
                const eleTree = layui.eleTree
                renderTree(eleTree, res.data)
              })
            })
          }
        })

      }

      const renderTree = (eleTree, data) => {
        state.el = eleTree({
          el: '.tree',
          data: data,
          showCheckbox: true,
          isDefaultChangePstatus: true,
          sort: true,
          initSort: {
            field: 'sort',
            type: 'asc'
          }
        })
      }

      const authorize = () => {
        Vue.nextTick(() => {

          //获得选中的节点
          const checkData = state.el.getChecked(false, true, true)
          console.info(checkData)
          state.menuIds = []
          state.menuIds = getMenuIds(checkData, state.menuIds)
          post('/api/sys/role/menu/edit', {roleId: state.roleId, menuIds: state.menuIds}).then(res => {
            if (res.success){
              cancel()
              getMenuTree()
              successMsg(res.data)
            } else {
              errorMsg(res.msg)
            }
          })
        })
      }

      //  获取所有选中的节点ID
      const getMenuIds = (treeNode, result) => {
        for (const i in treeNode) {
            result.push(treeNode[i].id)
        }
        return result
      }

      const cancel = () => {
        window.parent.layer.closeAll()
      }

      return {
        state,
        getMenuTree,
        authorize,
        cancel
      }
    }
  }
  const vue = Vue.createApp(app).mount('#app')

  function getParentData(roleId){
      vue.state.roleId = roleId
      vue.getMenuTree()
  }
</script>
<style>
    .tree{
        height: 260px;
        position: relative;
        overflow-y: auto;
    }
</style>
</html>